<template>
  <div class="h-full flex flex-col container" :style="{height: `${containerHeight}px`}" ref="containerRef">
    <a-input-search
      v-model:value="searchValue"
      style="margin-bottom: 8px"
      placeholder="Search"
      class="flex-shrink-0"
    />
    <div class="treeref flex-1" ref="treeref">
      <a-tree
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :tree-data="gData"
        @expand="onExpand"
      >
        <template #title="{ title }">
          <span v-if="title.indexOf(searchValue) > -1">
            {{ title.substring(0, title.indexOf(searchValue)) }}
            <span style="color: #f50">{{ searchValue }}</span>
            {{ title.substring(title.indexOf(searchValue) + searchValue.length) }}
          </span>
          <span v-else>{{ title }}</span>
        </template>
      </a-tree>
    </div>
  </div>
</template>
<script setup>
const containerRef = ref()
const containerHeight = ref()

onMounted(() => {
  // flex布局下，需要手动设置高度，否则不会出现滚动条
  setTimeout(() => {
    // console.log(containerRef.value.clientHeight)
    containerHeight.value = containerRef.value.clientHeight
  }, 0)
})

const x = 3
const y = 2
const z = 1
const genData = []
const generateData = (_level, _preKey, _tns) => {
  const preKey = _preKey || '0'
  const tns = _tns || genData
  const children = []
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`
    tns.push({
      title: key,
      key,
    })
    if (i < y) {
      children.push(key)
    }
  }
  if (_level < 0) {
    return tns
  }
  const level = _level - 1
  children.forEach((key, index) => {
    tns[index].children = []
    return generateData(level, key, tns[index].children)
  })
}
generateData(z)
const dataList = []
const generateList = (data) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i]
    const key = node.key
    dataList.push({
      key,
      title: key,
    })
    if (node.children) {
      generateList(node.children)
    }
  }
}
generateList(genData)
const getParentKey = (key, tree) => {
  let parentKey
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.children) {
      if (node.children.some((item) => item.key === key)) {
        parentKey = node.key
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children)
      }
    }
  }
  return parentKey
}
const expandedKeys = ref([])
const searchValue = ref('')
const autoExpandParent = ref(true)
const gData = ref(genData)
const onExpand = (keys) => {
  expandedKeys.value = keys
  autoExpandParent.value = false
}
watch(searchValue, (value) => {
  const expanded = dataList
    .map((item) => {
      if (item.title.indexOf(value) > -1) {
        return getParentKey(item.key, gData.value)
      }
      return null
    })
    .filter((item, i, self) => item && self.indexOf(item) === i)
  expandedKeys.value = expanded
  searchValue.value = value
  autoExpandParent.value = true
})
</script>

<style lang="scss" scoped>
.treeref {
  background: rgba($color: lightblue, $alpha: 0.3);
  min-height: 0;
  overflow-y: auto;
  height: 300px;
  :deep .ant-tree  {
    min-height: 0;
    height: 100%;
    overflow: auto;
  }
}
</style>
